<template>
	<view class="home">
		<van-sticky>
			<view class="search">
				<van-search :value="dataValue.name" shape="round" placeholder="请输入疾病名称搜索" @change="onSearch" />
			</view>
		</van-sticky>
		<view class="grid">
			<van-grid v-if="gridList.length">
				<van-grid-item class="gridItem" v-for="item in gridList" :key="item.id" :icon="item.url"
					:text="item.name" @click="gridClick(item)" />
			</van-grid>
			<view v-else class="noData" style="padding-top: 40rpx;">
				<text>暂无疾病~</text>
			</view>
		</view>
		<view class="applyBox">
			<view class="apply">
				<view class="text"><text>{{ meetInfo.title }}</text></view>
				<van-button round type="primary" @click="apply">报名</van-button>
			</view>
		</view>
		<view class="grid">
			<van-grid>
				<van-grid-item class="gridItem" v-for="item in gridList1" :key="item.url" :icon="item.icon"
					:text="item.text"  @click="gridClick1(item)" />
			</van-grid>
		</view>
		<view class="event" v-if="dataList.length">
			<scroll-view scroll-y="true" @scrolltolower="loadMore">
				<view class="list" v-for="(item, index) in dataList" :key="item.diseaseCollect.id" @click="gridClick(item.diseaseCollect)">
					<view class="content">
						<image class="img" :src=" item.diseaseCollect.url || require('@/static/image/uploadCase.png')" mode=""></image>
						<view class="showcon">
							<view class="c_title"><text>{{ item.diseaseCollect.name }}</text><text class="collect">正在征集</text></view>
							<view class="c_identify">
								<text class="handLetterSpa">{{ item.diseaseCollect.diseaseDesc }}</text>
							</view>
						</view>
					</view>
					<view class="solutionBox" v-if="item.classifyList.length">
						<view class="solution" v-for="(val, ind) in item.classifyList" :key="val.id" @click.stop="gridClick(item.diseaseCollect, ind)">
							<view class="so_title handLetterSpa">{{ val.name }}</view>
							<view class="so_ratio">
								<text>{{ val.recureCount }}例，占比{{ (((val.recureCount/item.allRecureCount) * 100).toFixed(2)) + '%' }}</text>
								<van-rate readonly :allow-half="true" :value="val.starLevel" color="#02BF88" size="12" />
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view v-else class="noData">
			<image src="../../../static/noData.png"></image>
			<view class="text">暂无数据</view>
		</view>
		<van-toast id='van-toast' />
	</view>
</template>

<script>
	import { diseaseList, newsList, meetingList } from '@/api/home'
	import { diseaseAllList, fileById, diseaseTopList } from '@/api/common'
	import { getByOwn } from '@/api/my'
	export default {
		name: 'home',
		data() {
			return {
				gridList: [],
				gridList1: [{
						id:1,
						icon: require('@/static/image/uploadCase.png'),
						text: '上传案例',
						url: "/pages/caseCollection/publishedCase",
						isExploit: true,
						isShow: true
					},
					{
						id:2,
						icon: require('@/static/image/helpVerify.png'),
						text: '帮助核实',
						url: "/pages/doctorCenter/index",
						isExploit: true,
						isShow: true
					},
					{
						id:3,
						icon: require('@/static/image/participate.png'),
						text: '参与鉴定',
						url: "/packageA/pages/exApplyList/index",
						isExploit: true,
						isShow: true
					},
					{
						id:4,
						icon: require('@/static/image/askHelp.png'),
						text: '寻求帮助',
						url: "/pages/user/aboutUs?id=10002",
						isExploit: true,
						isShow: true
					}
				],
				dataList: [],
				pagination: {
					pageSize: 20,
					pageNum: 1
				},
				total: '',
				meetInfo: {}
			}
		},
		onShow() {
			
		},
		onLoad() {
			if (this.isVerify) {
				this.getUsrInfo()
			} else {
				getApp().login();
			}
			this.pagination.pageNum = 1;
			this.getList()
			this.getAllList()
			this.getGridList()
			this.getMmetingList()
		},
		computed: {
			isVerify() { // 是否验证
				if (this.$storage.getItem('userInfo')) {
					return true
				} else {
					return false
				}
			},
			newDataList() {
				return	this.dataList.map(item => {
					item.classifyList.map(val => {
						var proportion = (((val.recureCount/item.allRecureCount) * 100).toFixed(2))
						this.$set(val, 'proportion' , proportion)
					})
					return item
				})
			}
		},
		methods: {
			// 去登录
			toVerify() {
				this.$showModal({
					title: '提示',
					content: '您还登录，是否去登录？',
					showCancel: true
				},(suc)=> {
					if (suc) {
						uni.reLaunch({
							url: '/pages/login/index'
						})						
					}
				})
			},
			// 获取鉴定会公告
			getMmetingList() {
				meetingList({pageSize:1, pageNum:1}).then(res => {
					if (res.status == 1) {
						this.meetInfo = res.data.rows[0]
					}
				})
			},
			gridClick(item, index=0) {
				if (this.isVerify) {
					let route = `/packageA/pages/signUp/index?data=${JSON.stringify(item)}&mentNum=${index}`
					if (item.id == '7') {
						route = '/pages/user/allCase'
					}
					uni.navigateTo({
						url: route
					})					
				} else {
					this.toVerify()
				}
			},
			gridClick1(item) {
				if (this.isVerify) {
					if (item.isShow) {
						if (item.isExploit) {
							if (item.isAttestation == 10 || item.id == 1) {
								uni.navigateTo({
									url: item.url
								})													
							} else if(item.isAttestation == '-1') {
								this.$toast.text('审核未通过，请重新认证')
							} else {
								this.$toast.text('您的身份正在审核中 请联系管理员审核通过')
							}				
						} else {
							this.$toast.text('暂未开发此功能')
						}
					} else {
						this.$toast.fail('请先认证再查看');
						setTimeout(() => {
							uni.navigateTo({
								url: '/pages/personal/authentication'
							})
						}, 2000)
					}					
				} else {
					this.toVerify()
				}
			},
			getUsrInfo() {
				getByOwn().then(res => {
						let dataInfo = {};
					if (res.data) {
						dataInfo = res.data;
						Object.keys(dataInfo).forEach((key) => {
						 if (dataInfo[key] == 'null' || dataInfo[key] == 'undefined') {
							 dataInfo[key] = ''
						 }
						})
						this.$nextTick(() => {
							this.$storage.setItem('roleDataInfo', dataInfo);
						})
						this.gridList1.map(item => {
							item.isShow = true
							item.isAttestation = dataInfo.status
						})
						if (dataInfo.type == 1 && dataInfo.status == 0 ) {
							this.gridList1[1].isShow = false
							this.gridList1[2].isShow = false
						}
						this.gridList1[3].isExploit = false
					} else {
						this.$set(dataInfo, 'type',1);
						this.$storage.setItem('roleDataInfo', dataInfo);
					}
				})
			},
			// 报名
			apply() {
				if (this.isVerify) {
					uni.navigateTo({
						url: `/packageA/pages/applyList/index?id=${this.meetInfo.id}`
					})					
				} else {
					this.toVerify()
				}
			},
			getAllList() {
				diseaseAllList().then(res => {
					this.$storage.setItem('diseaseList', res.data);
				})
			},
			getList(mode) {
				diseaseTopList(this.pagination).then(res => {
					if (mode == 'more') {
						this.dataList = this.dataList.concat(res.data);
					} else {
						this.dataList = res.data;
					}
					this.dataList.map((item,index) => {
						if (item.diseaseCollect.imgTheme) {
							fileById({ fileId: item.diseaseCollect.imgTheme }).then(res => {
								this.$set(item.diseaseCollect,'url', res.data.accessUrl);
							})
						}
						if (item.classifyList.length > 3) {
							item.classifyList = item.classifyList.slice(0, 3)
						}
					})
					this.total = res.data.total;
				})
			},
			// 头部搜索
			onSearch(e) {
				setTimeout(() => {
					this.getGridList(e.detail)
				}, 200)
			},
			getGridList(name="") {
				diseaseList({pageSize: 7, pageNum: 1, name}).then(res => {
					this.gridList = res.data.rows;
					this.gridList.map(item => {
						if (item.imgTheme) {
							fileById({ fileId: item.imgTheme }).then(res => {
								this.$set(item,'url', res.data.accessUrl);
							})
						}
					})
					if (this.gridList.length == 7) {
						this.gridList.push({
							url: require('@/static/image/allIn.png'),
							name: '全部',
							id: 7
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.home {
		width: 100%;

		.grid {
			width: 100%;
			padding: 0 0 20rpx;
			box-sizing: border-box;
			background-color: #F9F9F9;
			/deep/ .van-grid-item__icon {
				font-size: 100rpx;
			}
			/deep/ .van-grid-item__text {
				font-size: 26rpx;
			}
		}
		
		.applyBox {
			background-color: #F9F9F9;
			padding-bottom: 20rpx;
			.apply {
				width: 100%;
				background-color: #FFFFFF;
				box-sizing: border-box;
				padding: 48rpx 60rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				flex-wrap: nowrap;
				.text {
					width: 500rpx;
					font-weight: 800;
					color: #333333;
					font-size: 32rpx;
					text {
						width: 100%;
						display: inline-block;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}
				}
				/deep/ .van-button {
					width: 134rpx;
					height: 52rpx;
					font-size: 26rpx;
				}
			}
		}

		.event {
			.list {
				padding: 40rpx 30rpx;
				height: calc(100vh - 150rpx - 85rpx -30rpx - 31rpx);
				overflow-y: scroll;
				.content {
					height: 120rpx;
					display: flex;
					.img {
						width: 120rpx;
						height: 100%;
						border-radius: 16rpx;
					}
					.showcon {
						flex: 1;
						padding-left: 16rpx;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
					}
					.c_title {
						font-size: 32rpx;
						font-weight: 600;
						color: #333333;
						.collect {
							margin-left: 20rpx;
							font-size: 22rpx;
							padding: 6rpx 16rpx;
							background-color: #02BF88;
							color: #FFFFFF;
							font-weight: 400;
							border-radius: 8rpx;
						}
					}
					.c_identify {
						color: #666666;
						font-size: 24rpx;
						display: flex;
						flex-direction: column;
						text {
							display: -webkit-box;
							-webkit-line-clamp: 2;
							-webkit-box-orient: vertical;
							text-overflow: ellipsis;
							overflow: hidden;
							&:last-child {
								margin-top: 2rpx;
							}
						}
					}
				}
				.solutionBox {
					margin-top: 24rpx;
					display: flex;
					justify-content: space-around;
					.solution {
						flex: 1;
						display: flex;
						flex-direction: column;
						
						margin-right: 12rpx;
						&:last-child {
							margin-right: 0;
						}
						.so_title {
							background-color: #E5FFF7;
							padding: 24rpx 20rpx;
							color: #02BF88;
							font-size: 22rpx;
							height: 40rpx;
							font-weight: 600;
							display: flex;
							align-items: center;
							justify-content: center;
						}
						.so_ratio {
							margin-top: 16rpx;
							color: #666666;
							font-size: 22rpx;
							display: flex;
							flex-direction: column;
							align-items: center;
						}
					}
				}
			}
		}
	}

	/deep/ .van-cell {
		flex-direction: row;
	}

	/deep/ .van-cell__title {
		flex: 4;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		padding-left: 20rpx;
	}
</style>
